import {
  Image,
  Pressable,
  StyleProp,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import * as React from 'react';
import UserAvatar from '../../components/UserAvatar';
import { RootStackNavigationProp } from '../../types';
import { useNavigation } from '@react-navigation/native';
import { Course } from '../../shared/interfaces/course.interface';

interface CourseCardProps {
  course: Course;
  style?: StyleProp<ViewStyle>;
}

export default function CourseCard(props: CourseCardProps) {
  const { course, style } = props;
  const { id, title, cover, durationMinutes, used, trainer } = course;
  const navigation = useNavigation<RootStackNavigationProp<'CourseInfo'>>();
  const openCourse = () => {
    navigation.navigate('CourseInfo', { courseId: id });
  };

  return (
    <Pressable onPress={openCourse}>
      <View style={[styles.container, style]}>
        {cover ? (
          <Image source={{ uri: cover }} style={styles.coverImage} />
        ) : (
          <View style={styles.coverImage} />
        )}

        <View style={styles.user}>
          <UserAvatar
            style={styles.avatar}
            hasStar={trainer.isTrainer}
            size="small"
            source={{ uri: trainer.avatar }}
          />
          <Text style={styles.trainerName}>{trainer.name}教练</Text>
        </View>
        <Text style={styles.title}>{title}</Text>
        <View style={styles.subTitle}>
          <Text style={styles.subTitleText}>{durationMinutes} 分钟</Text>
          <Text style={styles.subTitleText}>·</Text>
          <Text style={styles.subTitleText}>{used} 次练过</Text>
        </View>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    height: 140,
  },
  user: {
    position: 'absolute',
    right: 12,
    bottom: 10,
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    marginRight: 6,
  },
  trainerName: {
    fontSize: 12,
    color: '#fff',
    textShadowColor: '#777777',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
  },
  coverImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'lightblue',
    borderRadius: 12,
  },
  title: {
    fontSize: 18,
    position: 'absolute',
    top: 10,
    left: 12,
    color: '#fff',
    fontWeight: '500',
    textShadowColor: '#777777',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
  },
  subTitle: {
    flexDirection: 'row',
    position: 'absolute',
    top: 36,
    left: 12,
    textShadowColor: '#777777',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
  },
  subTitleText: {
    color: '#fff',
    fontSize: 12,
    marginRight: 6,
    textShadowColor: '#777777',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
  },
});
